<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="cart/css/index.css">
</head>
<body>
    <div class="order_head">
        <div class="head_background">
            <div class="head_box">
                <a href="index.html" class="head_left_a"><img src="cart/img/logo.jpg" alt="" class="head_left_p"></a>
                <h1 class="head_h1">我的购物车</h1>
                <div class="head_right">
                    <span class="head_right_in">1412625918 ∨</span>
                    <span class="head_right_in">|</span>
                    <a href="order.html" class="head_right_in">我的订单</a>
                </div>

            </div>
        </div>
    </div>
    <div class="trolley_background">
        <div class="trolley_background_in" id="cartbox">
            <div class="tro_tab_h">
                <div class="col tro_tab_check" style="line-height: 70px; text-align: center;">
                    <input type="checkbox" id="checkall" title="全选">


                </div>
                <div class="col tro_tab_img">

                </div>
                <p class="col tro_tab_name">商品名称</p>
                <div class="col tro_tab_price">单价</div>
                <div class="col tro_tab_num">数量</div>
                <div class="col tro_tab_total">小计</div>
                <div class="col tro_tab_action">操作</div>

            </div>
<!--            <div class="tro_tab_h1">-->
<!--                <div class="col tro_tab_check">-->
<!--                    <input type="checkbox" name="check" checked>-->
<!--                    <span class="tro_tab_check_sp"></span>-->

<!--                </div>-->
<!--                <div class="col tro_tab_img">-->
<!--                    <img src="cart/img/app_04.jpg" alt="">-->

<!--                </div>-->
<!--                <div class="col tro_tab_name">-->
<!--                &lt;!&ndash;<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>&ndash;&gt;-->
<!--               <li class="tro_tab_name_li1">小米电视4A 32英寸 黑色 32英寸</li>-->
<!--               <li class="tro_tab_name_li2">适配机型:小米电视</li>-->

<!--                </div>-->
<!--                <div class="col tro_tab_price">-->
<!--                    <span  id="price">999</span><span>元</span>-->
<!--                </div>-->
<!--                <div class="col tro_tab_num">-->
<!--                    <a class="tro_tab_num_p1" id="subtract" href="javascript:;">-</a>-->
<!--                    <input type="text" value="1" id="num">-->
<!--                    <a class="tro_tab_num_p2" id="plus" href="javascript:;">+</a>-->
<!--                </div>-->
<!--                <div class="col tro_tab_total "><span class="tro_tab_total_value" id="prices" >999</span>元-->

<!--                </div>-->
<!--                <div class="col tro_tab_action">x</div>-->

<!--            </div>-->

<!--        </div>-->
<!--        <div class="tro_item_bot">-->
<!--        <p class="tro_bot_ppp">+</p>-->
<!--        <p class="tro_item_p ">1000mAh小米移动电源2 74元 <span style="color: #ff6700"></span></p>-->

    </div>
        <div class="tro_close_bot ">
            <!--<p class="tro_bot_ppp">+</p>-->
            <p class="tro_close_p ">继续购物 | 共<span id="cartnumber">1</span>件,已选择了<span id="checknumber">1</span>件<span style="color: #ff6700"></span></p>

            <p class="tro_close_p_r" id="settlementBtn" style="cursor: pointer">去结算</p>
            <p class="tro_close_p_c">合计:<span id="checktotal">999</span>元</p>
        </div>

    </div>


    <div class="foot">
        <ul class="foot_ul">
            <li class="foot_li">预约维修服务</li>
            <li class="foot_li">7天无理由退货</li>
            <li class="foot_li">15天免费换货</li>
            <li class="foot_li">满15元包邮</li>
            <li class="foot_li foot_fot">520余家售后网点</li>
        </ul>
        <div class="foot_center">
            <div class="foot_cen_left">
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
            </div>
            <div class="foot_cen_right">
                <p class="foot-phone">400-100-5678</p>
                <p class="foot-right-center">周一至周日 8:00-18:00<br>（仅收市话费)</p>
                <a class="foot-right-bottmo" href="">联系客服</a>
            </div>
        </div>
    </div>
    <div class="fot_bot_max">
        <div class="fot_bot">
            <img src="cart/img/logo.jpg" class="fot_bot_logo" >
            <div class="fot_bot_text">
                <p class="fot_bot_p">
                    <a class="fot_bot_a" href="">小米商城</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">MIUI</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米家</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米聊</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">多看</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">游戏</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">路由器</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米粉卡</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">政企服务</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">小米天猫店</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">隐私政策</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">问题反馈</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">廉政举报</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">Select Region</a>
                </p>
                <p class="fot_bot_p fot_bot_a1">
                    "©"
                    <a class="fot_bot_a1" href="">mi.con</a>
                    " 京ICP证110507号"
                    <a class="fot_bot_a1" href="">京ICP备10046444号</a>
                    <a class="fot_bot_a1" href="">京公网安备11010802020134号</a>
                    <a class="fot_bot_a1" href="">京网文[2017]1530-131号</a>
                    "<br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试"



                </p>
            </div>
            <div class="fot_bot_right">
                <a href="" class="fot_bot_right_img"><img src="cart/img/foot_01.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="cart/img/foot_02.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="cart/img/foot_03.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="cart/img/foot_04.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="cart/img/foot_05.png" alt=""></a>
            </div>

        </div>
        <img class="fot_bottom_img" src="cart/img/foot_06.png">
    </div>

    <script type="text/html" id="cartitem">
        <div class="tro_tab_h1" cartname="cartitem">
            <div class="col tro_tab_check" style="line-height: 86px;">
                <input type="checkbox" name="check" cartname="cartcheck"/>
                <span class="tro_tab_check_sp"></span>

            </div>
            <div class="col tro_tab_img">
                <img cartname="cartimg" src="cart/img/app_04.jpg" alt=""/>

            </div>
            <div class="col tro_tab_name">
                <!--<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>-->
                <li class="tro_tab_name_li1" cartname="cartname">小米电视4A 32英寸 黑色 32英寸</li>
                <li class="tro_tab_name_li2" cartname="cartinfo">适配机型:小米电视</li>

            </div>
            <div class="col tro_tab_price">
                <span id="price" cartname="cartprice">999</span><span>元</span>
            </div>
            <div class="col tro_tab_num">
                <a class="tro_tab_num_p1" subtractbtn href="javascript:;" cartproductid="">-</a>
                <input type="text" value="1" name="number" cartname="cartnumber" cartproductid/>
                <a class="tro_tab_num_p2" plusbtn href="javascript:;" cartproductid="">+</a>
            </div>
            <div class="col tro_tab_total "><span class="tro_tab_total_value" id="prices" cartname="carttotal">999</span>元

            </div>
            <div class="col tro_tab_action">
                <button type="button" cartname="cartdelete" cartproductid="">删除</button>
            </div>

        </div>
    </script>
    <script src="layui/layui.all.js"></script>
    <script>
        const $=layui.$;
        const layer=layui.layer;
        showCarts();
        checkAllTotal();
        function showCarts() {
            $.ajax({
                url: 'cart/getCarts',
                async: false,
                success: function (result) {
                    let data = result.data;
                    let itemtext = $("#cartitem").text();
                    for (let i = 0; i < data.length; i++) {
                        let $item = $(itemtext);
                        //改内容
                        $item.find("[cartname='cartimg']").attr("src", data[i].product.imgurl);
                        $item.find("[cartname='cartname']").text(data[i].product.name);
                        $item.find("[cartname='cartinfo']").text(data[i].product.info);
                        $item.find("[cartname='cartnumber']").val(data[i].number);
                        $item.find("[cartname='cartprice']").text(data[i].product.price);
                        $item.find("[cartname='carttotal']").text(data[i].product.price * data[i].number);
                        $item.find("[cartproductid]").attr("cartproductid", data[i].productid);
                        $("#cartbox").append($item);
                    }
                }
            });
        }
        //删除
        $("[cartname='cartdelete']").click(function(){
            let productid=$(this).attr("cartproductid");
            let $this=$(this);
            // 避免误操作
            layer.confirm("确认要删除该数据吗?",function(){
                $.ajax({
                    url:"cart/delete",
                    data:{productid:productid},
                    success:function(result){
                        let code=result.code;
                        console.log(code);
                        let data=result.data;
                        let msg=result.msg;
                            //重新加载数据
                            //showCarts();
                            $this.parents("[cartname='cartitem']").remove();
                            //提示删除成功
                            layer.msg(msg,{icon:1,time:1800});
                        checkAllTotal();
                    }
                })
            });
        });

        $("[subtractbtn]").click(function(){
            let $numberDom=$(this).siblings("[name='number']");
            let oldNumber=$numberDom.val();//val 获取字符串
            let newNumber=Number(oldNumber)-1;
            let productid=$(this).attr("cartproductid");
            changeNumber($numberDom,productid,newNumber);
        });

        $("[plusbtn]").click(function(){
            let $numberDom=$(this).siblings("[name='number']");
            let oldNumber=$numberDom.val();
            let newNumber=Number(oldNumber)+1;
            let productid=$(this).attr("cartproductid");
            changeNumber($numberDom,productid,newNumber);
        });
        $("[name='number']").blur(function(){
            let productid=$(this).attr("cartproductid");
            let $dom=$(this);
            let number=$(this).val();
            changeNumber($dom,productid,number);
        });

        function changeNumber(dom,productid,number){
            let $domNumber=dom;
            $.ajax({
                url:'cart/edit',
                data:{productid:productid,number:number},
                success:function(result){
                    if(result.code==200){
                        layer.msg(result.msg,{icon:1,time:1800});
                        $domNumber.val(result.data);
                    }else{
                        layer.msg(result.msg,{icon:2});
                        if(number>99){
                            number=99;
                            $domNumber.val(99);
                        }
                        if(number<1){
                            number=1;
                            $domNumber.val(1);
                        }
                    }
                    let $cartitem= $domNumber.parents("[cartname='cartitem']");
                    //变更合计
                    let price=$cartitem.find("[cartname='cartprice']").text();
                    let total=Number(price)*Number(number);
                    $cartitem.find("[cartname='carttotal']").text(total);
                    checkAllTotal();
                }
            });
        }

        $("[cartname='cartcheck']").change(function(){
            checkAllTotal();
        });
        //显示总的合计
        function checkAllTotal(){
            let total=0;
            $("[cartname='cartcheck']:checked").each(function(index,dom){
                let $cartitem= $(dom).parents("[cartname='cartitem']");
                //变更合计
                let price=$cartitem.find("[cartname='cartprice']").text();
                let number=$cartitem.find("[cartname='cartnumber']").val();
                total+=Number(price)*Number(number);

            });
            $("#checktotal").text(total);
            let checknumber=$("[cartname='cartcheck']:checked").length;
            let cartnumber=$("[cartname='cartcheck']").length;
            $("#cartnumber").text(cartnumber);
            $("#checknumber").text(checknumber);
        }

        $("#checkall").change(function(){
            let check=$(this).prop("checked");
            $("[cartname='cartcheck']").prop("checked",check);
            checkAllTotal();
        });

        $("#settlementBtn").click(function(){
            //准备数据
            //productids   counts
            //$number  被选中的复选框所在行的number组件  其中 value就是数量   cartproductid属性记录了商品id
let $number= $("[cartname='cartcheck']:checked").parents("[cartname='cartitem']").find("[cartname='cartnumber']");
           let productids="";
           let counts="";
            if($number.length>0){
                $number.each(function(index,item){
                    let proid=$(item).attr("cartproductid");
                    let count=$(item).val();
                    productids+=(proid+",");
                    counts+=(count+",");
                });
                productids=productids.substring(0,productids.length-1);
                counts=counts.substring(0,counts.length-1);
                //准备好数据
                location.href="shopping/settlement?productids="+productids+"&counts="+counts;
            }else{
                layer.msg("请选择需要购买的商品",{icon:6,time:2000});
            }
        });
    </script>

</body>
</html>